<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:directive.include file="/WEB-INF/sitemesh-decorators/include.jsp" />

<style type="text/css">
table#permisTable ul.token-input-list-facebook {
   width: 370px;
}
table.permisTable div.token-input-dropdown-facebook {
   width: 400px;
   z-index: 9999;
   /* z-index: 555; */
}
</style>
<script type="text/javascript">
   Wicket.Event.add(window, "domready", function(event) {     
      $('#cancelPermissionLink').click(function(){
         $('#permissionsDialogContainer').hide(500);
      });
   });
</script>
<div style="" id="permissionsDialogContainer">
   <div style="z-index: 9988;" id="gcdialog">
      <div class="gcdtitle">
         <span class="title">Edit Permissions</span>
      </div>
      <div class="contentwrapper">
         <div class="content">
         <span>
            <form id="permissionsForm" method="get" action="">
               <div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden">
                  <input name="permissionsForm_hf" id="permissionsForm_hf" value="" type="hidden">
               </div>
               <div class="soloPermissionsPanel">
                  <div class="permissionsPanel">
                     <div class="permissionTableHeader">
                     <table>
                        <thead>
                           <tr class="head">
                              <th><h3>Access Rights</h3></th>
                              <td><span perm="3" title="Hidden">Hidden<br></span></td>
                              <td><span perm="2" title="No Access">None<br></span></td>
                              <td><span perm="1" title="Read Only">Read<br></span></td>
                              <td><span perm="0" title="Full">Full<br></span></td>
                              <td><p style="width: 22px;">&nbsp;</p></td>
                           </tr>
                        </thead>
                     </table>
                     </div>
                     <div class="permissionsWrapper">
                        <div class="permissonsGroup">
                           <div class="permissionTable">
                           <table>
                              <thead>
                                 <tr class="head">
                                    <th><h3><span>Repository Members</span><span class="arrow"></span></h3></th>
                                    <td><span perm="3" title="Select all"></span></td>
                                    <td><span perm="2" title="Select all"></span></td>
                                    <td><span perm="1" title="Select all"></span></td>
                                    <td><span perm="0" title="Select all"></span></td>
                                    <td><p style="width: 22px;">&nbsp;</p></td>
                                 </tr>
                              </thead>
                           </table>
                           <table id="permisTable">
                              <tbody>
                                 <tr class="accessRight" id="u_0">
                                    <th><span>Everyone</span><input type="hidden" name="pid" value="0"></th>
                                    <td style="text-align: center;" title="Hidden"><span><input perm="3" id="hidden0" name="permGroup0" value="H" ${file.defaultAccessRight eq 'H' ? 'checked="checked"' : '' } class="wicket-permGroup0" type="radio"></span></td>
                                    <td style="text-align: center;" title="No Access"><span><input perm="2" id="none0" name="permGroup0" value="N" ${file.defaultAccessRight eq 'N' ? 'checked="checked"' : '' } class="wicket-permGroup0" type="radio"></span></td>
                                    <td style="text-align: center;" title="Read Only"><span><input perm="1" id="read0" name="permGroup0" value="R" ${file.defaultAccessRight eq 'R' ? 'checked="checked"' : '' } class="wicket-permGroup0" type="radio"></span></td>
                                    <td style="text-align: center;" title="Full"><span><input perm="0" id="write0" name="permGroup0" value="F" ${file.defaultAccessRight eq 'F' ? 'checked="checked"' : '' } class="wicket-permGroup0" type="radio"></span></td>
                                    <td><p style="width: 15px;">&nbsp;</p></td>
                                 </tr>
                                 <c:forEach items="${permissions}" var="perm" varStatus="i">
                                 <tr style="${i.count % 2 != 0 ? 'background: #E0E0E0;' : ''}" class="accessRight" id="u_${perm.userID}">
                                    <th><span>${perm.user.username}</span><input type="hidden" name="pid" value="${perm.id}"></th>
                                    <td style="text-align: center;" title="Hidden"><span><input perm="3" id="hidden${perm.id}" name="permGroup${perm.id}" value="H" ${perm.accessRight eq 'H' ? 'checked="checked"' : '' } class="wicket-permGroup${perm.id}" type="radio"></span></td>
                                    <td style="text-align: center;" title="No Access"><span><input perm="2" id="none${perm.id}" name="permGroup${perm.id}" value="N" ${perm.accessRight eq 'N' ? 'checked="checked"' : '' } class="wicket-permGroup${perm.id}" type="radio"></span></td>
                                    <td style="text-align: center;" title="Read Only"><span><input perm="1" id="read${perm.id}" name="permGroup${perm.id}" value="R" ${perm.accessRight eq 'R' ? 'checked="checked"' : '' } class="wicket-permGroup${perm.id}" type="radio"></span></td>
                                    <td style="text-align: center;" title="Full"><span><input perm="0" id="write${perm.id}" name="permGroup${perm.id}" value="F" ${perm.accessRight eq 'F' ? 'checked="checked"' : '' } class="wicket-permGroup${perm.id}" type="radio"></span></td>
                                    <td><a href="javascript:;" onclick="deletePermission(${perm.id});"><img src="${pageContext.request.contextPath}/images/btn_icon_cancel.png" title="delete" /></a></td>
                                 </tr>
                                 </c:forEach>
                                 <tr class="accessRight" id="u_new">
                                    <th>
                                    <input type="text" id="permissionMember" name="permissionMember" />
                                    <script type="text/javascript">
                                       $(document).ready(function() {
                                          $("#permissionMember").tokenInput("${pageContext.request.contextPath}/ajax/user/search", {
                                              theme: "facebook",
                                              queryParam : "approver",
                                              //tokenLimit : 1,
                                              preventDuplicates: true,
                                              resultsFormatter: function(item) { return "<li>" + "<div><img src='${pageContext.request.contextPath}/images/default_profile.png' title='" + item.name + "' height='40px' width='40px' />" + "<div style='display: inline-block; vertical-align: top; padding: 0px 0px 0px 5px'><span style='display:block'>" + item.name + "</span><span>" + item.username + "</span></div></div></li>" },
                                              tokenFormatter: function(item) { return "<li><p>" + item.name + "</p></li>" }
                                          });
                                       });
                                    </script>
                                    </th>
                                    <td style="text-align: center;" title="Hidden"><span><input perm="3" id="hidden_new" name="newPermGroup" value="H" class="wicket-newPermGroup" type="radio"></span></td>
                                    <td style="text-align: center;" title="No Access"><span><input perm="2" id="none_new" name="newPermGroup" value="N" class="wicket-newPermGroup" type="radio"></span></td>
                                    <td style="text-align: center;" title="Read Only"><span><input perm="1" id="read_new" name="newPermGroup" value="R" class="wicket-newPermGroup" type="radio"></span></td>
                                    <td style="text-align: center;" title="Full"><span><input perm="0" id="write_new" name="newPermGroup" value="F" checked="checked" class="wicket-newPermGroup" type="radio"></span></td>
                                    <td><p style="width: 15px;">&nbsp;</p></td>
                                 </tr>
                              </tbody>
                           </table>
                           </div>
                        </div>
                     </div>
                     <p style="margin-top: 30px; font-style: italic;">
                        <strong>Note:</strong>
                        Admin users always have full access to all files.
                        <span>File permissions are effective only when users have the visibility of this workspace.</span>
                     </p>
                  </div>
                  <script type="text/javascript">
                     $(".permissionTable thead td span").click(function(){
                        var perm = $(this).attr("perm");
                        $(this).parents("table").next().find("input[perm="+perm+"]").each(function(){
                           $(this).click();
                        });
                     });
                     $(".permissionTable thead h3").click(function(){
                        $(this).parents("table").next().slideToggle();
                     });
                  </script>
               </div>
               <div style="line-height:34px">
               <a class="gcSubmit" href="javascript:;" onclick="addPermission();">
               Update
               <span class="left"></span>
               <span class="right"></span><span style="display: none" id="spinnerPermission">&nbsp;<img
                                 src="${pageContext.request.contextPath}/images/spinnerflat.gif"></span>
               </a>
               or <a id="cancelPermissionLink" href="javascript:;">cancel</a>
               </div>
               <div class="spacer">&nbsp;</div>
            </form>
         </span>
         </div>
      </div>
      <div class="background userDefinedBg">
      </div>
   </div>
</div>